<script lang="ts">
  import { update_basic, remove as remove_board } from "$lib/api/board/board";
  import { leave as leave_board } from "$lib/api/board/board_member";
  import EditText from "$lib/components/editable/EditText.svelte";
  import RemoveModal from "$lib/components/modal/RemoveModal.svelte";
  import { boardStore } from "$lib/stores/board.svelte";
  import { userStore } from "$lib/stores/user.svelte";
  import { request } from "$lib/utils/request";
  import { getContext } from "svelte";
  import MemberList from "./MemberList.svelte";
  import type { Store as ToastStore } from "@zag-js/toast";
  import { goto } from "$app/navigation";
  import LlmList from "./LlmList.svelte";
  import ExtDataList from "./ExtDataList.svelte";

  const toast: ToastStore = getContext("toast");

  let showLeaveModal = $state(false);
  let showRemoveModal = $state(false);

  async function updateBoardName(newName: string): Promise<boolean> {
    if (newName.trim() == "") {
      return false;
    }
    await request(
      update_basic({
        session_id: userStore.userSession,
        board_id: boardStore.curBoardId,
        basic_info: {
          board_name: newName.trim(),
        },
      }),
    );
    return true;
  }

  async function leaveBoard() {
    await request(
      leave_board({
        session_id: userStore.userSession,
        board_id: boardStore.curBoardId,
      }),
    );
    toast.create({
      title: "成功",
      description: "删除频道成功!",
      type: "success",
    });
    showRemoveModal = false;
    goto("/");
  }

  async function removeBoard() {
    await request(
      remove_board({
        session_id: userStore.userSession,
        board_id: boardStore.curBoardId,
      }),
    );
    toast.create({
      title: "成功",
      description: "退出频道成功!",
      type: "success",
    });
    showLeaveModal = false;
    goto("/");
  }
</script>

<div class="h-[calc(100vh-100px)] overflow-y-auto p-2 space-y-4">
  <div
    class="card border-[1px] border-surface-200-800 w-full h-[50px] rounded-[10px] mb-2 bg-surface-200-800 content-center pl-2"
  >
    <table class="w-full">
      <tbody>
        <tr>
          <td class="w-[80px]">频道名称</td>
          <td>
            <EditText
              value={boardStore.curWebBoard?.boardInfo?.basic_info.board_name ??
                ""}
              canEdit={boardStore.curWebBoard?.myMember?.admin ?? false}
              maxWidthClass="max-w-[300px]"
              onChange={(newValue) => updateBoardName(newValue)}
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <MemberList />
  <LlmList />
  <ExtDataList />

  <div
    class="card preset-filled-error-100-900 border-[1px] border-error-200-800 w-full p-0 rounded-[10px] bg-surface-100-900"
  >
    <header
      class="border-b-[2px] border-error-200-800 flex justify-between bg-error-200-800 pl-2 pr-2 rounded-t-[10px]"
    >
      <h4 class="h4">危险操作</h4>
    </header>
    <div class="flex gap-4 p-2">
      <button
        type="button"
        class="btn preset-filled-error-200-800"
        onclick={() => (showLeaveModal = true)}>退出频道</button
      >
      {#if boardStore.curWebBoard?.myMember?.admin == true}
        <button
          type="button"
          class="btn preset-filled-error-400-600"
          onclick={() => (showRemoveModal = true)}>删除频道</button
        >
      {/if}
    </div>
  </div>
</div>

<div class="absolute -left-[10000px]">
  {#if showLeaveModal}
    <RemoveModal
      title="退出频道"
      content={`是否退出频道 ${boardStore.curWebBoard?.boardInfo?.basic_info.board_name ?? ""} ?`}
      okName="退出"
      onCancel={() => (showLeaveModal = false)}
      onOk={() => leaveBoard()}
    />
  {/if}

  {#if showRemoveModal}
    <RemoveModal
      title="删除频道"
      content={`是否删除频道 ${boardStore.curWebBoard?.boardInfo?.basic_info.board_name ?? ""} ?\n删除后所有画稿将丢失!!`}
      onCancel={() => (showRemoveModal = false)}
      onOk={() => removeBoard()}
    />
  {/if}
</div>
